<template>
  <div class="container" >
    <div class="send-express">
        <div class="content">
            <div class="cell-list">
                <div class="i-cell i-input">
                    <div class="i-input-title">收件人：</div>
                    <input class='i-input-input' type="text" v-model="EmpName" placeholder="请输入收件人姓名">
                </div>
                <!-- <i-input class="bottom-line" v-model="EmpName" title="收件人：" placeholder="请输入收件人姓名" /> -->
                <picker @change="bindExpressPickerChange" v-model="ExpressCompanyName" :range="expressList" range-key="ExpressCompanyName">
                    <i-cell title="快递公司" v-model="ExpressCompanyName" is-link></i-cell>
                </picker>
                <div class="i-cell i-input">
                    <div class="i-input-title">快递单号：</div>
                    <input class='i-input-input' type="text" v-model="ExpressNo" placeholder="请输入快递单号">
                </div>
                <view class="i-cell" @click="sendup">
                    <view class="i-cell-hd i-input-title">快递单照片：</view>
                    <view class="sendup">上传</view>
                </view>
                <div class="pic" v-if='ExpressUrl'>
                    <img class="idcard-pic-pre" :src="ExpressUrl" @click="perviewCard(ExpressUrl)" alt="">
                    <div class="upload-remove" v-if='ExpressUrl' @click="removePic"></div>
                </div>
            </div>
        </div>
        <buttomBtn title="提交" @handleClick='_express'></buttomBtn>
    </div>
  </div>
</template>

<script>
import buttomBtn from '@/components/Bbutton'
import { expresscompanys, express } from 'api/api'
import config from 'api/config'

const baseUrl =
    process.env.NODE_ENV === 'development'
        ? config.Host.development
        : process.env.NODE_ENV === 'production'
            ? config.Host.production
            : config.Host.test
export default {
    data () {
        return {
            ExpressCompanyName: '',
            ExpressCompanyCode: '',
            ExpressNo: '',
            ExpressUrl: '',
            CaseId: '',
            EmpName: '',
            expressList: []
        }
    },

    components: {
        buttomBtn
    },

    methods: {
        perviewCard (e) {
            let urls = []
            urls.push(e)
            wx.previewImage({
                urls
            })
        },
        removePic () {
            this.ExpressUrl = ''
        },
        sendup () {
            let _this = this
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var tempFilePaths = res.tempFilePaths
                    // var tempFile = res.tempFiles[0]
                    console.log(res)
                    console.log(tempFilePaths)
                    wx.showToast({
                        title: '正在上传...',
                        icon: 'loading',
                        mask: true,
                        duration: 10000
                    })
                    wx.uploadFile({
                        url: `${baseUrl}/case/upload`,
                        filePath: tempFilePaths[0],
                        name: 'file',
                        header: {
                            'Authorization': wx.getStorageSync('token')
                        },
                        success: function (res) {
                            console.log(res)
                            wx.showToast({
                                title: '上传成功',
                                icon: 'success',
                                duration: 2000
                            })
                            _this.ExpressUrl = JSON.parse(res.data).data.fileUrl
                            // wx.hideToast()
                        },
                        fail: function (res) {
                            wx.hideToast()
                            wx.showModal({
                                title: '错误提示',
                                content: '上传图片失败',
                                showCancel: false,
                                success: function (res) { }
                            })
                        }
                    })
                }
            })
        },
        _expresscompanys () {
            expresscompanys()
                .then((res) => {
                    console.log(res)
                    this.expressList = res.data
                })
        },
        _express () {
            if (!this.EmpName) {
                wx.showToast({
                    title: '请填写收件人',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            if (!this.ExpressCompanyCode) {
                wx.showToast({
                    title: '请选择快递公司',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            if (!this.ExpressNo) {
                wx.showToast({
                    title: '请填写快递单号',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            wx.showLoading({
                title: '提交中',
                mask: true
            })
            let obj = {
                'CaseId': this.CaseId,
                'RecieveName': this.EmpName,
                'ExpressCompanyName': this.ExpressCompanyName,
                'ExpressCompanyCode': this.ExpressCompanyCode,
                'ExpressNo': this.ExpressNo,
                'ExpressUrl': this.ExpressUrl
            }
            express(obj)
                .then((res) => {
                    console.log(res)
                    wx.hideLoading()
                    if (res.state === 'success') {
                        wx.showToast({
                            title: '成功',
                            icon: 'success',
                            duration: 3000,
                            success: function () {
                                let url = '/pages/claim/claimSettlement?status=2'
                                wx.navigateTo({ url })
                            }
                        })
                    }
                })
        },
        bindExpressPickerChange (e) {
            let index = e.mp.detail.value
            this.ExpressCompanyName = this.expressList[index].ExpressCompanyName
            this.ExpressCompanyCode = this.expressList[index].ExpressCompanyCode
        }
    },
    async mounted () {
        this.CaseId = this.$root.$mp.query.CaseId
        await this._expresscompanys()
    }
}
</script>

<style lang='stylus' scoped>
.send-express
    width 750rpx
    min-height 100vh
    display flex
    justify-content space-between
    flex-direction column
    .content
        width 100%
        .cell-list
            margin-top 15rpx
    .i-cell
        border-bottom:1px solid #efefef
        position:relative
        padding:12px 15px
        display:flex
        background:#fff
        align-items:center
        line-height:1.4
        font-size:14px
        overflow:hidden
        .i-input-title
            color:#495060
            min-width:65px
            padding-right:10px
        .sendup
            color: #007aff
    .i-input
        border-bottom:1px solid #efefef
        padding:7px 15px
        color:#495060
    .pic
        display flex
        width 750rpx
        height 420rpx
        justify-content center
        align-items center
        background #f2f2f2
        border-radius 5rpx
        position relative
        .idcard-pic-pre
            width 100%
            height 100%
    .upload-remove
        width: 30rpx
        height: 30rpx
        position: absolute
        right: 12rpx
        top: 12rpx
        text-align: right
        vertical-align: top
        z-index: 2
        background-size: 30rpx auto
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill-opacity='.4' fill='%23404040' cx='8' cy='8' r='8'/%3E%3Cpath d='M11.898 4.101a.345.345 0 0 0-.488 0L8 7.511l-3.411-3.41a.345.345 0 0 0-.488.488l3.411 3.41-3.41 3.412a.345.345 0 0 0 .488.488L8 8.487l3.411 3.411a.345.345 0 0 0 .488-.488L8.488 8l3.41-3.412a.344.344 0 0 0 0-.487z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E")

</style>
